import { isExistUser, isExistPhone, isExistEmail, register } from "../js/api.js"


var userInp = document.getElementsByClassName("user")[0];
var userTips = document.getElementsByClassName("user_tips")[0];

var pwdInp = document.getElementsByClassName("pwd")[0];
var pwdTips = document.getElementsByClassName("pwd_tips")[0];

var phoneInp = document.getElementsByClassName("phone")[0];
var phoneTips = document.getElementsByClassName("phone_tips")[0];

var emailInp = document.getElementsByClassName("email")[0];
var emailTips = document.getElementsByClassName("email_tips")[0];


var btn = document.getElementsByClassName("btn")[0];
console.log(userInp, userTips, btn);


var isUserOk = false;
var isPwdOk = false;
var isPhoneOk = false;
var isEmailOk = false;


userInp.onchange = function () {
    var user = userInp.value;

    // 去除所有空格  => 将处理后的内容更新到输入框
    user = user.replace(/\s/g, "");
    userInp.value = user;

    isUserOk = false; // 每次校验之前  先将状态重置为false


    var userReg = /^[a-zA-Z_$][\w$]{5,11}$/;
    if (userReg.test(user)) {  // 格式校验成功  => 还要判断用户名是否被注册



        // var xhr = new XMLHttpRequest();

        // xhr.open("get","http://121.43.116.41/demo/php/isExistUser.php?user="+user,true);

        // xhr.send();

        // xhr.onreadystatechange = function(){
        //     if(xhr.readyState == 4 && xhr.status == 200){
        //         var result = xhr.responseText;

        //         result = JSON.parse(result);
        //         console.log(result);

        //         let {status,message} = result;
        //         if(status){
        //             userTips.textContent = "√";
        //             userTips.classList.remove("error");
        //             userTips.classList.add("right");
        //             isUserOk = true;
        //         }else{
        //             userTips.textContent = "用户名已被注册";
        //             userTips.classList.remove("right");
        //             userTips.classList.add("error");
        //         }
        //     }
        // }

        /* var p = ajaxPromise({
            type:"get",
            url:"http://121.43.116.41/demo/php/isExistUser.php",
            data:{
                user,
            },
            dataType:"json",
        }).then((res)=>{
                let {status,message} = res;
                if(status){
                    userTips.textContent = "√";
                    userTips.classList.remove("error");
                    userTips.classList.add("right");
                    isUserOk = true;
                }else{
                    userTips.textContent = "用户名已被注册";
                    userTips.classList.remove("right");
                    userTips.classList.add("error");
                }

        }).catch((err)=>{
            
        }) */

        /* var p = isExistUser({user})
        p.then((res)=>{
            let {status,message} = res;
            if(status){
                userTips.textContent = "√";
                userTips.classList.remove("error");
                userTips.classList.add("right");
                isUserOk = true;
            }else{
                userTips.textContent = "用户名已被注册";
                userTips.classList.remove("right");
                userTips.classList.add("error");
            }
        }).catch((err)=>{
            
        }) */

        isExistUser({ user }).then((res) => {
            let { status, message } = res;
            if (status) {
                userTips.textContent = "√";
                userTips.classList.remove("error");
                userTips.classList.add("right");
                isUserOk = true;
            } else {
                userTips.textContent = "用户名已被注册";
                userTips.classList.remove("right");
                userTips.classList.add("error");
            }

        }).catch((err) => {

        })







    } else {
        userTips.textContent = "用户名由数字 字母 _ 组成, 6-12位, 且不能以数字开头";
        // userTips.style.color = "red";
        // userTips.style.fontSize = "12px";

        userTips.classList.remove("right");
        userTips.classList.add("error");

    }
}


pwdInp.onchange = function () {
    var pwd = pwdInp.value;

    isPwdOk = false;
    var pwdReg = /^\w{6,12}$/;
    if (pwdReg.test(pwd)) {

        // 密码强度校验  

        var isExistNum = /[0-9]/.test(pwd);
        var isExistBig = /[A-Z]/.test(pwd);
        var isExistSmall = /[a-z]/.test(pwd);
        var isExistSpe = /[_]/.test(pwd);

        var level = isExistNum + isExistBig + isExistSmall + isExistSpe;

        pwdTips.textContent = "密码强度:" + level;
        // pwdTips.style.color = "green";
        // pwdTips.style.fontSize = "12px";

        pwdTips.classList.remove("error");
        pwdTips.classList.add("right");

        isPwdOk = true;
    } else {
        pwdTips.textContent = "密码由数字 字母 _ 组成, 6-12位";
        // pwdTips.style.color = "red";
        // pwdTips.style.fontSize = "12px";

        pwdTips.classList.remove("right");
        pwdTips.classList.add("error");
    }
}


phoneInp.onchange = function () {
    var phone = phoneInp.value;

    isPhoneOk = false;
    var phoneReg = /^1[3-9]\d{9}$/;
    if (phoneReg.test(phone)) {



        /* var xhr = new XMLHttpRequest();
 
        xhr.open("get","http://121.43.116.41/demo/php/isExistPhone.php?phone="+phone,true);

        xhr.send();

        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                var result = xhr.responseText;

                result = JSON.parse(result);
                console.log(result);

                let {status,message} = result;
                if(status){
                    phoneTips.textContent = "√";
                    phoneTips.classList.remove("error");
                    phoneTips.classList.add("right");
                    isPhoneOk = true;

                    
                }else{
                    phoneTips.textContent = "手机号已被注册";
                    phoneTips.classList.remove("right");
                    phoneTips.classList.add("error");
                }
            }
        } */


        isExistPhone({ phone }).then(res => {
            var { status, message } = res;
            if (status) {
                phoneTips.textContent = "√";
                phoneTips.classList.remove("error");
                phoneTips.classList.add("right");
                isPhoneOk = true;
            } else {
                phoneTips.textContent = "手机号已被注册";
                phoneTips.classList.remove("right");
                phoneTips.classList.add("error");
            }

        }).catch(err => {

        })
    } else {
        phoneTips.textContent = "请输入正确的手机号";
        phoneTips.classList.remove("right");
        phoneTips.classList.add("error");
    }
}


emailInp.onchange = function () {
    var email = emailInp.value;

    isEmailOk = false;

    // var emailReg = /^[a-zA-Z]\w{5,17}@(qq|163|126|sina|gmail)\.(com|cn)$/; 
    var emailReg = /^\w+@\w+\.\w+$/;
    if (emailReg.test(email)) {


        var xhr = new XMLHttpRequest();

        xhr.open("get", "http://121.43.116.41/demo/php/isExistEmail.php?email=" + email, true);

        xhr.send();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;

                result = JSON.parse(result);
                console.log(result);

                let { status, message } = result;
                if (status) {
                    emailTips.textContent = "√";
                    emailTips.classList.remove("error");
                    emailTips.classList.add("right");
                    isEmailOk = true;
                } else {
                    emailTips.textContent = "邮箱已被注册";
                    emailTips.classList.remove("right");
                    emailTips.classList.add("error");
                }
            }
        }

        isExistEmail({ email }).then(res => {
            var { status, message } = res;
            if (status) {
                emailTips.textContent = "√";
                emailTips.classList.remove("error");
                emailTips.classList.add("right");
                isEmailOk = true;
            } else {
                emailTips.textContent = "邮箱已被注册";
                emailTips.classList.remove("right");
                emailTips.classList.add("error");
            }

        }).catch(err => {

        })

    } else {
        emailTips.textContent = "请输入正确的邮箱";
        emailTips.classList.remove("right");
        emailTips.classList.add("error");
    }
}

// 点击注册按钮 => 如果全都校验成功,就跳转页面
btn.onclick = function () {
    console.log(isUserOk, isPwdOk, isPhoneOk, isEmailOk);
    if (isUserOk && isPwdOk && isPhoneOk && isEmailOk) {
        // 全都校验成功
        // (1) 将数据通过后端(服务端)存储到数据库  
        // (2) 注册成功之后进行跳转
        var user = userInp.value;
        var pwd = pwdInp.value;
        var phone = phoneInp.value;
        var email = emailInp.value;

        // post传参 =>  利用http post机制,将数据存放到请求主体(body)中,随请求头一同传给服务端
        // (1) 将数据改为FormData格式  => 配置请求头(请求时携带的数据)  
        // (2) 将参数数据对象作为实参传递到send(body)方法中


        /*  var xhr = new XMLHttpRequest();
 
         xhr.open("post",`http://121.43.116.41/demo/php/register.php`,true);
 
         // application/x-www-form-urlencoded 数据格式,是form表单post的默认格式
         xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
         xhr.send(`user=${user}&pwd=${pwd}&phone=${phone}&email=${email}`);
 
         xhr.onreadystatechange = function(){
             if(xhr.readyState == 4 && xhr.status == 200){
                 var result = xhr.responseText;
 
                 result = JSON.parse(result);
                 console.log(result);
 
                 var {status,message} = result;
                 if(status){
                     location.href = "./login.html"
                 }
             }
         } */

        // 发送请求(pending)  => 根据请求结果改变Promise实例的状态(fulfilled/reject)
        var p = ajaxPromise({
            type: "post",
            url: "http://121.43.116.41/demo/php/register.php",
            data: {
                user,
                pwd,
                phone,
                email,
            },
            dataType: "json"
        })


        // then方法指定Promise实例状态改变之后的回调
        p.then((res) => {

            var { status, message } = res;
            if (status) {
                location.href = "./login.html"
            }

        }).catch((err) => {

        })





    }
}
